<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/css/layuimini.css?v=2.0.4.2}" media="all">
    <link rel="stylesheet" th:href="@{/css/themes/default.css}" media="all">
    <link rel="stylesheet" th:href="@{/lib/font-awesome-4.7.0/css/font-awesome.min.css}" media="all">
    <style>
        .div-content{

            background-color:white;
            border-radius: 5px;
            padding: 15px;

        }
         .table-search-fieldset {
            margin: 0;
            border: 1px solid #e6e6e6;
            padding: 10px 20px 5px 20px;
            color: #6b6b6b;
        }

    </style>
</head>
<body>


<div class="div-content">

    <form class="layui-form layui-form-pane" id="form-search">
    <fieldset class="table-search-fieldset">
        <legend>
            搜索条件
        </legend>

        <div class="layui-form-item">



            <div class="layui-inline">
                <label class="layui-form-label">员工姓名</label>
                <div class="layui-input-inline" style="width: 150px;">
                    <input type="text" name="name" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label">生日</label>
                <div class="layui-input-inline" style="width: 120px;">
                    <input type="text" name="startDate" placeholder="开始日期" autocomplete="off" class="layui-input date">
                </div>
                <div class="layui-form-mid">-</div>
                <div class="layui-input-inline" style="width: 120px;">
                    <input type="text" name="endDate" placeholder="结束日期" autocomplete="off" class="layui-input date">
                </div>
            </div>


            <div class="layui-inline">
            <button id="btn-search" lay-submit lay-filter="bt-search-filter" type="button" class="layui-btn layui-btn-radius layui-btn-normal">
                <i class="layui-icon layui-icon-search"></i>



                查询
            </button>
                <button id="btn-reset"  type="reset" class="layui-btn layui-btn-radius  layui-btn-primary">
                    <i class="layui-icon layui-icon-fonts-clear"></i>



                    清空条件
                </button>
            </div>



        </div>


    </fieldset>

    </form>
    <table id="table-emp" lay-filter="table-emp-filter"></table>

</div>
<script type="text/html" id="convertSex">
    {{#
        if(d.sex == 'M'){

            return '男';
    }else if(d.sex == 'F'){
            return '女';
    }else{
            return '妖';

    }
    }}

</script>

<script type="text/html" id="convertDept">
    {{#
        return d.dept.deptName;

    }}

</script>

<script type="text/html" id="table-emp-toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">新增</button>
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete">删除</button>

    </div>
</script>

<script type="text/html" id="col-emp-toolbar">

    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>

</script>

<script th:src="@{/webjars/jquery/3.5.1/jquery.min.js}" charset="utf-8"></script>
<script th:src="@{/layui/layui.js}" charset="utf-8"></script>
<script th:inline="javascript">


    function refreshTable(){
        $("#btn-reset").click();
        $("#btn-search").click();


    }
    var ctxPath = [[@{/}]];




    layui.use(['laydate','table','form'], function(){
        var laydate = layui.laydate;
        var table = layui.table;
        var form = layui.form;

        // 表格头部工具栏监听
        table.on('toolbar(table-emp-filter)', function(obj){
            if (obj.event == 'add'){
                layer.open({
                    type: 2,
                    title: "新增员工",
                    area: ['100%','100%'],
                    shadeClose: false,

                    content: ctxPath + 'emp/add/ui'
                });


            }else if (obj.event == 'delete'){
                var checkStatus = table.checkStatus('table-emp'); //idTest 即为基础参数 id 对应的值
                // 如果没有选中任何数据
                if (checkStatus.data.length == 0){

                    layer.alert('你没有选中任何数据', {icon: 2,anim:6,title:"警告"});

                    return false;

                }



                // 选中的id
                var idArr = new Array();
                $(checkStatus.data).each(function (){
                    idArr.push(this.empId);

                });


                layer.confirm('您确认删除选中记录？', {icon: 3, title:'删除确认'}, function(index){
                    // 异步请求删除数据,结果提示，刷新表格

                    let url = ctxPath + "emp/" + idArr.join(",");
                    var params = {
                        _method: "DELETE"
                    }


                    $.post(url,params,function (response){

                        if (response.code ==0){
                            layer.msg(response.message, {icon: 1});
                            refreshTable();
                        }else {
                            layer.alert(response.message, {icon: 2,anim: 6});
                        }

                    })

                    layer.close(index);
                });




            }






        });

        //执行一个laydate实例
        laydate.render({
            elem: '.date' //指定元素
        });

        //员工列表表格渲染
        table.render({
            elem: '#table-emp'

            ,url: ctxPath + 'emp/list' //数据接口
            ,page: true //开启分页
            ,toolbar: "#table-emp-toolbar"
            ,limits: [5,10,30,50,100]
            ,cols: [[ //表头
                {type: "checkbox",width: 60},
                {field: 'empId', title: '员工编号', width:120, sort: true,align: 'center'}
                ,{field: 'name', title: '姓名', width:140,align: 'center'}
                ,{field: 'sex', title: '性别', width:80, sort: true,align: 'center',templet:'#convertSex'}
                ,{field: 'age', title: '年龄', width:80,align: 'center'}
                ,{field: 'sal', title: '工资', width: 140,align: 'right'}
                ,{field: 'deptId', title: '部门', width: 140, sort: true,align: 'center',templet:'#convertDept'}
                ,{field: 'birthday', title: '生日', width: 120, sort: true,align: 'center'}
                ,{field: 'address', title: '家庭住址',align: 'left'}
                ,{title: '操作', width: 150,toolbar: '#col-emp-toolbar'}
            ]]
        });


        // 监听表单提交
        form.on('submit(bt-search-filter)', function(data){

            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            // 刷新表格
            table.reload('table-emp', {
                where: { //设定异步数据接口的额外参数，任意设
                    name: data.field.name,
                    startDate: data.field.startDate,
                    endDate: data.field.endDate
                    //…
                }
                ,page: {
                    curr: 1 //重新从第 1 页开始
                }
            });

            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
            // 监听操作列
        table.on('tool(table-emp-filter)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            if (layEvent == 'del'){
                layer.confirm('您确认删除该员工: '+ data.name + " ? ", {icon: 3, title:'删除确认'}, function(index){
                    // 异步请求删除数据,结果提示，刷新表格

                    let url = ctxPath + "emp/" + data.empId;
                    var params = {
                        _method: "DELETE"
                    }


                    $.post(url,params,function (response){

                        if (response.code ==0){
                            layer.msg(response.message, {icon: 1});
                            refreshTable();
                        }else {
                            layer.alert(response.message, {icon: 2,anim: 6});
                        }

                    });

                    layer.close(index);
                });


        }else if (layEvent == 'edit'){
                layer.open({
                    type: 2,
                    title: "修改员工",
                    area: ['100%','100%'],
                    shadeClose: false,

                    content: ctxPath + 'emp/' + data.empId
                });

            }




        });



    });
</script>



</body>
</html>